<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .user {
            width: 300px;
            height: 300px;
            border: 1px solid hotpink;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/user">用户管理</router-link>
    <router-view></router-view>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
    var User = Vue.component('user', {
        template: `
       <div class="user">
        <h2>user center</h2>
        <router-link to="/user/profile">个人资料</router-link>
        <router-link to="/user/posts">岗位</router-link>
        <router-view></router-view>
       </div>`
    });
    const UserProfile = {
        template: '<h3>个人资料：张三</h3>'
    };
    const UserPosts = {
        template: '<h3>岗位：FE</h3>'
    };
    const Router = new VueRouter({
        routes: [
            {
                path: '/user',
                component: User,
                children: [
                    {
                        path: 'profile',
                        component: UserProfile
                    },
                    {
                        path: 'posts',
                        component: UserPosts
                    }
                ]
            }
        ]
    });
    var vm = new Vue({
        el: '#app',
        data: {},
        router: Router
    })
</script>
</body>
</html>